<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <em class="el-icon-lx-calendar"></em>管理员
        </el-breadcrumb-item>
        <el-breadcrumb-item>修改头像</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="back">
        <el-button type="primary" @click="back">返回首页</el-button>
      </div>
      <div class="form-box">
        <div class="form-position">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="上传新头像">
              <el-upload
                ref="upload"
                action="#"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                list-type="picture-card"
                :limit="limitNum"
                :auto-upload="false"
                :on-exceed="handleExceed"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="imgChange"
              >
                <em class="el-icon-plus"></em>
              </el-upload>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('form')"
                >上传</el-button
              >
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { UpdateLogo } from "../../api/index";
export default {
  name: "updatelogo",
  data() {
    return {
      form: {},
      limitNum: 1,
      imgfile: '',
      imgfilename: '',
      dialogVisible: false,
      dialogImageUrl: '',
    };
  },
  methods: {
    onSubmit(formName) {
      var that = this
      this.updatelogoimg(function (status) {
        if (status) {
          that.resetForm();
          that.axios({
            method: "post",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            url: "http://192.168.2.225:8080/com.huidian.rem/FindDengluLogo",
            data: JSON.stringify( {
                username: localStorage.getItem("ms_username")
            }),
            }).then(function(res){
                if(res.data!=null){
                    localStorage.setItem('ms_logoimg', res.data);
                    that.$emit("updateImg")
                    console.log("不为空");
                }else{
                    console.log("为空");
                }
            })
        }
      });
    },
    back() {
      this.$router.push("/dashboard");
    },
    updatelogoimg(callback) {
      // 判断上传文件的格式
      if (
        !(
          this.imgfile.type === "image/png" ||
          this.imgfile.type === "image/gif" ||
          this.imgfile.type === "image/jpg" ||
          this.imgfile.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message: `请上传格式为image/png, image/gif, 
                                image/jpg, image/jpeg的图片`,
        });
        return;
      }
      let size = this.imgfile.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小不能超过2M",
        });
        return;
      }
      // 加载动画
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // 创建formdata，通过form数据格式来传
      var fd = new FormData();

      // 添加要传输的数据
      fd.append("username", localStorage.getItem("ms_username"));
      fd.append("logo", this.imgfile, this.imgfilename);
      // 发送请求
      UpdateLogo(fd)
        .then((res) => {
          console.log(res);
          loading.close();
          if (res > 0) {
            this.$message.success("修改成功！");
            callback(true);
          } else {
            this.$message.error("修改失败！");
            callback(false);
          }
        })
    },
    // 重置数据
    resetForm() {
      this.$refs["upload"].clearFiles();
    },
    // 文件超出上限时触发
    handleExceed(files, fileList) {
      this.$message({
        message: "头像只能有一个",
        type: "warning",
      });
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // 时上传所需的参数重置
      this.imgfile = "";
      this.imgfilename = "";
    },
    // 点击文件列表中已上传的文件时的钩子
    // 显示预览的图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 关闭图片预览
    changeimg() {
      this.dialogVisible = false;
    },
    // 图片改变时触发
    imgChange(files, fileList) {
      console.log(files);
      this.imgfile = files.raw;
      this.imgfilename = files.name;
    },
  },
};
</script>
<style scoped>
.back {
  width: 100wh;
  margin-bottom: 10px;
}
.form-box {
  height: 250px;
}
.form-position {
  width: 500px;
  position: absolute;
  left: 50%;
  transform: translateX(-60%);
}
/* 图片预览的样式 */
.imgpreview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
